<template>
  <div class="sys-setting card-box publicdetails">
    <div class="sys-setting-title">
      <div class="sys-setting-title-text">设备总览</div>
      <!-- <el-button @click="funShowDia" type="primary">历史记录</el-button > -->
    </div>
    <div class="flex width100 " style="margin-top: 10px;height:100%">
      <div style="width: 100%; height: 100%; text-align: center; border: 1px solid #d4d7e2; background: #fff; ">
        <div class="text_c flex f-between" style="background: linear-gradient(180deg, #f8f9fb 0%, #f4f4f5 100%); width: 100%; height: 48px">
          <div class="text_c flex f-between">
              <div class="text_c flex f-between" style="margin-left: 20px">
                  <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #00de33 48%, #00c65b 100%)"></div>
                  <span> 正常</span>
              </div>
               <div class="text_c flex f-between" style="margin-left: 20px">
                    <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #fefd00 50%, #fefd00 100%)"></div>
                    <span> 故障</span>
                </div>

                <div class="text_c flex f-between" style="margin-left: 20px">
                    <div class="statusDisp" style="background: linear-gradient(180deg, #ffffff 0%, #ff0000 42%, #ff0000 100%)"></div>
                    <span>报警</span>
                </div>
                <div class="text_c flex f-between" style="margin-left: 20px">
                    <div class="statusDisp" style="background: linear-gradient(180deg, #F8FBFF 0%, #CDD3DD 41%, #929BA8 100%);"></div>
                    <span> 离线</span>
                </div>
          </div>
        </div>
        <div v-for="(item, index) in devInfo" :key="index" style="margin-top: 5px; width: 95%">
            <GroupSummary  :devitem="item"/>
        </div>
      </div>
    </div> 
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import moment from 'moment';
import GroupSummary from './GroupSummary.vue';

let { proxy } = getCurrentInstance();
const showDia = ref(false);
const diaFormRef = ref(null);
const diaForm = ref({});
const devInfo = ref({});


const funShowDia = () => {
  diaForm.value = { ...setInfo.value };
  showDia.value = true;
};
const doSubmit = (type) => {
  if (type === "cancel") {
    diaForm.value = {};
    diaFormRef.value.resetFields();
    showDia.value = false;
    return;
  }
  diaFormRef.value.validate((valid) => {
    if (valid) {
      diaForm.value.timeSpan = Number(diaForm.value.timeSpan);
      diaForm.value.sdsaveflag = Number(diaForm.value.sdsaveflag);
      diaForm.value.runMode = Number(diaForm.value.runMode);
      diaForm.value.readMode = Number(diaForm.value.readMode);
      proxy
        ._http({
          url: "/api/systemConfig/update",
          type: "post",
          isBody: true,
          isLoading: true,
          data: {
            ...diaForm.value,
          },
        })
        .then((res) => {
          ElMessage.success("修改成功");
          diaForm.value = {};
          diaFormRef.value.resetFields();
          showDia.value = false;
          getInfo()
        })
        .catch((err) => {});
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
const timeSyncfun = () => {
   proxy._http({
      url: "/api/systemConfig/timeSync",
      type: "post",
      isBody: true,
      data: {date:moment(new Date()).format('yyyy-MM-DD HH:mm:ss')},
    })
    .then((res) => {
      console.log("同步时间", res);
      if(res.data == "ok")
        ElMessage.success("设置成功");
      else
        ElMessage.error(res.data);
    })
    .catch((err) => {});
}

const getdevInfo = () => {
  proxy
    ._http({
      url: "/api/equipment/devOverview",
      type: "post",
      isBody: true,
      isLoading: true,
      data:{}
        })
    .then((res) => {
      devInfo.value = res;
      console.log("设备数据：", devInfo.value);
      
    })
    .catch((err) => {});
};
onMounted(() => {
  getdevInfo();
});
</script>
<style lang="scss">
.f-between {
    justify-content: space-between;
}
.flex {
    display: -webkit-box;
    display: flex;
}
.text_c {
    text-align: center;
    // display: flex;
    // justify-content: center;
    align-items: center;
}
.statusDisp {
    width: 12px;
    height: 12px;
    border: 1px solid #151617;
    border-radius: 50%;
    margin-right: 3px;
}

.sys-setting {
  box-sizing: border-box;

  &-title {
    box-sizing: border-box;
    padding-bottom: 28px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e7e7e7;
    &-text {
      font-size: 20px;
      color: #000000f0;
      font-weight: bold;
    }
  }
}

.txt-normal {
    color: #07af74;
    border: 1px solid #07af74;
    background:#07af741A;
    border-radius: 1px;
    padding: 0 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}
.txt-alarm {
    color: #de1b1b;
    border: 1px solid #de1b1b;
    background:#de1b1b1A;
    border-radius: 1px;
    padding: 0 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}
</style>